<template>
  <div class="top">
    <el-row>
      <!--左侧-->
      <el-col :span="12">
        <el-row>
          <!--酒店logo-->
          <el-col :span="2">
            <div class="con con_1">
              <div class="con_logo">
                <img :src="hotelLogo" v-if="hotelLogo != '' && hotelLogo != null && hotelLogo != undefined"/>
                <img src="../../assets/hotelLogo.png" v-else/>
              </div>
            </div>
          </el-col>
          <!--酒店名称-->
          <el-col :span="6">
            <div class="con con_2">
              {{hotelName}}
            </div>
          </el-col>
          <!--工作台-->
          <el-col :span="2">
            <a href="javascript:void (0)" @click="toWorkbench" title="工作台">
              <div class="con con_hover con_4">
                <div class="icon work">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.75 34.74">
                    <g id="图层_2" data-name="图层 2">
                      <g id="图层_1-2" data-name="图层 1">
                        <path class="cls-1" style="fill:#515151;" d="M31.49,0H3.26A3.26,3.26,0,0,0,0,3.26V22.8a3.26,3.26,0,0,0,3.26,3.26H14.14a1.26,1.26,0,0,1,1.26,1.26v4.59a1.26,1.26,0,0,1-1.26,1.26H5.42c-.6,0-1.08.2-1.08.8s.48.77,1.08.77H29.31c.6,0,1.09-.14,1.09-.74s-.48-.84-1.09-.84H19.8a1.26,1.26,0,0,1-1.26-1.27l0-4.45a1.26,1.26,0,0,1,1.25-1.25l11.67-.13a3.26,3.26,0,0,0,3.26-3.26V3.26A3.26,3.26,0,0,0,31.49,0Zm1.64,22.8a1.77,1.77,0,0,1-1.82,1.68l-28.1.12a1.84,1.84,0,0,1-1.63-1.76V3.27A1.65,1.65,0,0,1,3.26,1.59H31.49a1.69,1.69,0,0,1,1.64,1.66Zm-.56,0"/>
                      </g>
                    </g>
                  </svg>
                </div>
              </div>
            </a>
          </el-col>
          <!--创建会员-->
          <el-col :span="2">
            <a href="javascript:void (0)" @click="toMember" title="会员列表">
              <div class="con con_hover con_6">
                <div class="icon created">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.03 37.31">
                    <g id="图层_2" data-name="图层 2">
                      <g id="图层_1-2" data-name="图层 1">
                        <path class="cls-1" style="fill:#515151;" d="M15.66,19a9.49,9.49,0,1,1,9.49-9.49A9.5,9.5,0,0,1,15.66,19Zm0-17.25a7.76,7.76,0,1,0,7.76,7.76,7.76,7.76,0,0,0-7.76-7.76Zm0,0"/>
                        <path class="cls-1" style="fill:#515151;" d="M27.8,37.31h-21a.87.87,0,1,1,0-1.74h21a2.5,2.5,0,0,0,2.49-2.5.87.87,0,1,1,1.74,0,4.23,4.23,0,0,1-4.23,4.23Zm0,0"/>
                        <path class="cls-1" style="fill:#515151;" d="M1.16,37.14a.87.87,0,0,1-.85-.7A16,16,0,1,1,32,33.27a.87.87,0,0,1-1.74,0A14.28,14.28,0,1,0,2,36.1a.87.87,0,0,1-.68,1l-.17,0Zm0,0"/>
                      </g>
                    </g>
                  </svg>
                </div>
              </div>
            </a>
          </el-col>
          <!--云支付-->
          <el-col :span="2">
            <a href="javascript:void (0)" @click="toPayment" title="云支付">
              <div class="con con_hover con_6">
                <div class="icon created">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 712.34 649.61">
                    <defs>
                      <clipPath id="clip-path" transform="translate(0 -0.19)">
                        <rect class="cls-1" style="fill:none;" x="0.12" width="712.8" height="651.1"/>
                      </clipPath>
                    </defs>
                    <g id="图层_2" data-name="图层 2">
                      <g id="图层_1-2" data-name="图层 1">
                        <g class="cls-2" style="clip-path:url(#clip-path);">
                          <path d="M532.71,649.81H152.1a12.38,12.38,0,0,1-3-.37c-39.78-2.25-76.91-24.55-104.8-63C15.73,547,0,495,0,439.87c0-55.68,16-108.13,45.06-147.69C70.89,257,104.39,235.66,140.51,231,150.62,169.32,175.34,113.28,211,71.66,250.56,25.57,301.15.19,353.49.19c84.28,0,160.44,64.94,196.77,166.59,42.54,5.56,81.94,31.16,111.84,73,32.4,45.29,50.24,104.9,50.24,167.85,0,64.7-18.68,125.53-52.61,171.28s-79,70.94-127,70.94ZM148.83,613.59H537.71c83.28,0,151-91.36,151-203.67,0-52.91-15-103-42.23-141.07s-63.59-60-102.62-62.15c-6.5-.35-12.26-5.71-14.81-13.78C499,97.84,430.06,36.41,353.41,36.41c-45.73,0-89.93,22.17-124.47,62.43-34.17,39.84-56.83,94.77-63.82,154.68-1.27,11-8.23,19.06-16.45,19.18-33.49.48-64.92,18.42-88.49,50.51S23.6,397.9,23.6,443.12c0,44.73,12.77,87,36,118.95s54.12,50.14,87.21,51.28a13.2,13.2,0,0,1,2.07.24Zm0,0" transform="translate(0 -0.19)"/>
                        </g>
                        <path class="cls-3" style="fill:#231815;" d="M510,539.06c-18.14.92-33.2,8.31-37.3,19.84-1,2.31-2.05,3.23-3.42,3.23a7.06,7.06,0,0,1-2.4-.92C418.32,538.14,382,515.52,354.66,486c-40.73,41.53-91.38,68.3-153,87.22L200,566.29c59.21-24.92,106.78-54.91,143.06-93.68-26.35-34.61-43.81-77.07-56.13-138.9H273.55c-7.19,0-17.11,1.85-22.93,5.08L241,321.71a240.47,240.47,0,0,0,25,1.85h83.16V242.34h-115c-7.19,0-17.11,1.85-22.93,5.08l-9.58-17.07a240.46,240.46,0,0,0,25,1.85H349.19V204.5c0-18.92-.68-50.3-1.37-67.37l26.35,18.46c2.4,1.85,3.42,3.23,3.42,4.62,0,.92-.68,2.31-2.74,4.15l-9.58,8.77v59.07H467.94l14.37-26.77,22.59,26.77c2.4,2.77,3.42,5.08,3.42,6.92s-1.71,3.23-4.79,3.23H365.27v81.22H407L420.71,300l20.88,28.15q3.08,4.15,3.08,6.92a4.62,4.62,0,0,1-2.74,4.15c-9.24,4.61-12.32,7.38-15.74,17.07-17.8,50.76-37,89.52-60.58,117.21,35.25,34.61,82.14,54,144.42,60.45ZM294.43,333.71c14,53.53,33.2,95.52,59.21,126.9,25.33-31.38,46.89-78,56.81-126.9Z" transform="translate(0 -0.19)"/>
                      </g>
                    </g>
                  </svg>
                </div>
              </div>
            </a>
          </el-col>
        </el-row>
      </el-col>
      <!--右侧-->
      <el-col :span="12">
        <el-row type="flex" class="row-bg" justify="end">
          <!--待办-->
          <el-col :span="2">
            <a href="javascript:void (0)" @click="toBacklog" title="待办">
              <div class="con con_hover con_6">
                <div class="icon backlogSvg">
                  <div class="backlogNum" v-if="backlogNum > 0">{{backlogNum}}</div>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.97 654.8">
                    <g id="图层_2" data-name="图层 2">
                      <g id="图层_1-2" data-name="图层 1">
                        <rect class="cls-1" style="fill:none;stroke:#231815;stroke-miterlimit:10;stroke-width:26px;" x="13" y="13" width="486.97" height="628.8" rx="58.18" ry="58.18"/>
                        <rect x="120.92" y="147.45" width="279.03" height="26.5"/>
                        <rect x="120.92" y="237.19" width="279.03" height="26.5"/>
                        <rect x="120.92" y="326.92" width="279.03" height="26.5"/>
                        <rect x="120.92" y="416.65" width="279.03" height="26.5"/>
                      </g>
                    </g>
                  </svg>
                </div>
              </div>
            </a>
          </el-col>
          <!--锁定-->
          <el-col :span="2">
            <a href="javascript:void (0)" @click="lock" title="锁定">
              <div class="con con_hover con_8">
                <div class="icon lock">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.13 37.32">
                    <g id="图层_2" data-name="图层 2">
                      <g id="图层_1-2" data-name="图层 1">
                        <path class="cls-1" style="fill:#515151;" d="M13.65,22.12a3.47,3.47,0,0,0-3.46,3.46,3.29,3.29,0,0,0,.86,2.25v.35a2.59,2.59,0,0,0,5.18,0v-.35a3.28,3.28,0,0,0,.86-2.25,3.36,3.36,0,0,0-3.46-3.46Zm.86,4.66v1a.86.86,0,0,1-1.73,0v-1a1.76,1.76,0,0,1-.86-1.38,1.73,1.73,0,1,1,3.46,0,1.37,1.37,0,0,1-.86,1.38ZM23.84,15.2v-5a10.19,10.19,0,1,0-20.39,0v5A3.47,3.47,0,0,0,0,18.66v15.2a3.47,3.47,0,0,0,3.46,3.46H23.67a3.47,3.47,0,0,0,3.46-3.46V18.66a3.43,3.43,0,0,0-3.28-3.46Zm-18.66-5a8.47,8.47,0,0,1,16.93,0v5H5.18ZM25.4,33.86a1.73,1.73,0,0,1-1.73,1.73H3.46a1.73,1.73,0,0,1-1.73-1.73V18.66a1.73,1.73,0,0,1,1.73-1.73H23.67a1.73,1.73,0,0,1,1.73,1.73Zm0,0"/>
                      </g>
                    </g>
                  </svg>
                </div>
              </div>
            </a>
          </el-col>
          <!--用户-->
          <el-col :span="4">
            <div class="con con_hover con_9">
              <div class="noShow">
                <el-dropdown style="width: 100% !important;height: 100% !important;;" @command="toOption" trigger="click">
                  <div class="el-dropdown-link" style="width: 100% !important;height: 100% !important;;">
                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                  </div>
                  <el-dropdown-menu style="margin-top: 3px !important;" slot="dropdown">
                    <el-dropdown-item command="1">交班</el-dropdown-item>
                    <el-dropdown-item command="2">推广奖励</el-dropdown-item>
                    <el-dropdown-item command="3">退出</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="userNmae">{{userName}}</div>
              <div class="userCon">
                <div class="user">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.83 33.83">
                    <g id="图层_2" data-name="图层 2">
                      <g id="图层_1-2" data-name="图层 1">
                        <path class="cls-1" style="fill:#515151;" d="M23.39,1.28a16.9,16.9,0,1,0,9.16,9.16.85.85,0,0,0-1.56.65,15.21,15.21,0,1,1-8.24-8.24.85.85,0,0,0,.65-1.56Zm1.92,21.13a9.31,9.31,0,0,1-16.12,0,.85.85,0,0,0-1.46.85,11,11,0,0,0,19,0,.85.85,0,0,0-1.46-.85ZM10.15,13.53a1.69,1.69,0,0,1,3.38,0v1.7a1.69,1.69,0,0,1-3.38,0Zm10.15,0a1.69,1.69,0,0,1,3.38,0v1.7a1.69,1.69,0,0,1-3.38,0Zm0,0"/>
                      </g>
                    </g>
                  </svg>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  export default {
    name: "conHeader",
    computed:mapGetters([
      'loginUserInfo',
      'lockShow',
      'lockTran',
      'newCallNum'
    ]),
    data() {
      return {
        hotelLogo:'',
        hotelName:'',
        userName:'',
        haveNews:true, //是否有新信息
        backlogNum:0, //未处理的呼叫数量
      }
    },
    watch:{
      newCallNum(val){
        let self = this
        self.backlogNum = val
      }
    },
    mounted(){
      let self = this
      if (localStorage.getItem('userName') != null && localStorage.getItem('userName') != 'null' && localStorage.getItem('userName') != undefined && localStorage.getItem('userName') != ''){
        self.userName = localStorage.getItem('userName')
        self.hotelName = localStorage.getItem('hotelName')
      }
      if (localStorage.getItem('hotelLogo') != null && localStorage.getItem('hotelLogo') != 'null' && localStorage.getItem('hotelLogo') != undefined && localStorage.getItem('hotelLogo') != ''){
        self.hotelLogo = localStorage.getItem('hotelLogo')
      }else {
        self.hotelLogo = '../../assets/hotelLogo.png'
      }
      self.upstate({key:'newCallNum',val:localStorage.getItem('newCallNum')})
      self.backlogNum = self.newCallNum
    },
    methods:{
      ...mapActions([
        'upstate'
      ]),
      //跳转至工作台
      toWorkbench(){
        let self = this
        sessionStorage.setItem('loopStop',false)
        setTimeout(() => {
          self.$router.push('/index')
        },100)
      },
      //跳转至会员列表
      toMember(){
        let self = this
        sessionStorage.setItem('loopStop',true)
        setTimeout(() => {
          self.$router.push('/member')
        },100)
      },
      //跳转至云支付
      toPayment(){
        let self = this
        sessionStorage.setItem('loopStop',true)
        setTimeout(() => {
          self.$router.push('/payment')
        },100)
      },
      //跳转至代办
      toBacklog(){
        let self = this
        sessionStorage.setItem('loopStop',true)
        setTimeout(() => {
          self.$router.push('/backlog')
        },100)
      },
      //跳转至个人选项
      toOption(index){
        let self = this
        if (index == 1){ //交班
          // self.upstate({key:'TDshow',val:true})
          sessionStorage.setItem('loopStop',true)
          setTimeout(() => {
            self.$router.push('/shifts')
          },100)
        }else if (index == 2){ //推广奖励
          sessionStorage.setItem('loopStop',true)
          setTimeout(() => {
            self.$router.push('/reward')
          },100)
        }else { //退出
          this.$confirm('是否退出?', '提示', {
            confirmButtonText: '退出',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '退出成功!'
            });
            localStorage.removeItem('access_token');
            localStorage.removeItem('expires_in');
            localStorage.removeItem('refresh_token');
            localStorage.removeItem('userName');
            localStorage.removeItem('hotelName');
            localStorage.removeItem('otaList');
            self.upstate({key:'loginUserInfo',val:[]})
            self.upstate({key:'saveHouseList',val:[]})
            self.upstate({key:'otaList',val:[]})
            sessionStorage.setItem('loopStop',true)
            setTimeout(() => {
              self.$router.push('/')
            },100)
          }).catch(() => {

          });
        }
      },
      //锁定
      lock(){
        let self = this
        this.$prompt('请输入锁屏密码', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的锁屏密码是: ' + value
          });
          localStorage.setItem('lockPass',value)
          setTimeout(() => {
            if (!self.lockShow){
              self.upstate({key:'lockShow',val:true})
              self.upstate({key:'lockTran',val:true})
            }
          },2000)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消锁屏'
          });
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .top{
    width: 100%;
    height: 48px;
    background: #fff;
    box-shadow: 0px 3px 3px rgb(220, 223, 230);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    .con{
      height: 48px;
      box-sizing: border-box;
      overflow: hidden;
    }
    .con_hover{
      border-right: 1px solid rgba(0, 0, 0, 0.07);;
      padding-top: 12px;
    }
    .con_hover:hover{
      background: #F8F8FF;
      cursor: pointer;
    }
    .con_1{
      display: flex;
      flex-direction: column;
      justify-content: center;
      .con_logo{
        width: 40px;
        height: 40px;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        img{
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
    .con_2{
      font-weight: 500;
      font-size: 18px;
      color: #2b425b;
      line-height: 48px;
      padding-left: 5px;
    }
    .icon{
      width: 22px;
      height: 22px;
      margin: auto;
      svg{
        width: 100%;
        height: 100%;
      }
    }
    .backlogSvg{
      position: relative;
      .backlogNum{
        position: absolute;
        background: red;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        line-height: 17px;
        font-size: 12px;
        color: #fff;
        text-align: center;
        top: -7px;
        right: -7px;
      }
    }
    .con_7{
      border-left: 1px solid rgba(0, 0, 0, 0.07);
      .message{
        position: relative;
        .news{
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #ef5350;
          position: absolute;
          top: -4px;
          right: -2px;
        }
      }
    }
    .con_9{
      border-right: none;
      padding: 0;
      position: relative;
      .noShow{
        width: 100%;
        height: 100%;
        opacity: 1;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
      .userNmae{
        float: left;
        display: inline-block;
        width: 60%;
        line-height: 48px;
        text-align: center;
      }
      .userCon{
        float: left;
        width: 40%;
        padding-top: 12px;
        .user{
          display: inline-block;
          width: 22px;
          height: 22px;
          svg{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>
